Rodrigo

Mhhh... there could be an issue with the labelToScroll method, we'll check and report back. Is this causing an issue? In the demo I made I see no problems with that small percentage being off, I don't see a line at either side when clicking the buttons. Happy Tweening!

Just don't use position sticky and use ScrollTrigger to create the layering effect: https://codepen.io/GreenSock/pen/XWOJGVV Here are a couple of demos that buttons: https://codepen.io/GreenSock/pen/WNzQJMO https://codepen.io/GreenSock/pen/GRMGPBz Hopefully this helps. Happy Tweening!

Hi @Aron H and welcome to the GSAP Forums! I'm not sure I understand what you're trying to do here, maybe something like this: https://codepen.io/GreenSock/pen/LYdRQra Hopefully this helps, if not please provide a clear description of what you're trying to do so we can get a better idea. Happy Tweening!

Hi @wbforrester and welcome to the GSAP Forums! What exactly is down? The codepen @Sahil created is working as expected right now. Sometimes Codepen doesn't work for a few minutes and then gets back at working. Happy Tweening!

Hi, This is related to a funky way Astro is handling SSR with React rather than a GSAP related problem. The solution seems to be import the plugin from the dist folder as a default import and not a named import: import gsap from 'gsap-trial'; import MorphSVGPlugin from 'gsap-trial/dist/MorphSVGPlugin'; import { useGSAP } from '@gsap/react'; import { useRef } from 'react'; if (typeof window !== 'undefined') { gsap.registerPlugin(useGSAP, MorphSVGPlugin); } export const MorphTest = () => { const btnRef = useRef<HTMLDivElement>(null); const { contextSafe } = useGSAP(() => { console.log(MorphSVGPlugin); },{ scope: btnRef }); if (!contextSafe) return; const onClick = contextSafe(() => { gsap.to('#start', { morphSVG: '#end', }); }); return (/* JSX Here */); }; Here is a fork of your demo: https://stackblitz.com/edit/github-txz3pq-tycrjg?file=src%2Fcomponents%2FMorphTest.tsx Hopefully this helps. Happy Tweening!

Hi @Cuplet and welcome to the GSAP Forums! You could add this at the end of the code, in order to make sure that the ScrollTrigger instance has been created: gsap.to(window, { duration: 20, ease: "none", scrollTo: { y: "max", autoKill: true, }, repeat: -1 }); That will use the ScrollTo Plugin in order to scroll in a loop until a particular even is fired (scroll, wheel, button, draggable). Hopefully this helps. Happy Tweening!

Hi Fred, Yeah, that's a limitation from an iframe and not a GSAP issue as far as I can tell. For security reasons code can't leak from one side to the other, regardless if the domain of the iframe is the same as the rest of the site. Sorry I can't be of more assistance. Happy Tweening!

Hi, You have an error when creating the getScrollLookup instance, you're supposed to pass the horizontal Tween not the ScrollTrigger instance: // Wrong let getPosition = getScrollLookup(".race", { start: "center center", containerAnimation: horizon // ScrollTrigger instance }); // Right let getPosition = getScrollLookup(".race", { start: "center center", containerAnimation: tween // GSAP Tween }); The helper function needs the actual Tween that is moving the elements horizontally, not the ScrollTrigger instance that creates that particular effect. Here is a fork of your demo: https://codepen.io/GreenSock/pen/qBwevOW Hopefully this helps. Happy Tweenning!

Hi @Ignacio Gramajo Feijoo and welcome to the GSAP Forums! The heart of that demo is here: https://cdn.jsdelivr.net/gh/hmongouachon/rgbKineticSlider/js/rgbKineticSlider.js As you can see that is a lot of code and unfortunately we don't have the time resources to provide free general consulting or create complex solutions for our users. For what I see that demo is using version 2 of GSAP and version 5 of PIXI, so I would strongly recommend using the latest versions. Here is a GSAP Migration Guide: https://gsap.com/resources/3-migration This is how the displacement filter works in the latest version of PIXI: https://pixijs.com/8.x/examples/filters-basic/displacement-map-flag Finally in order to port this to Next/React, we have a useGSAP hook that is super handy: https://gsap.com/resources/React Hopefully this helps. Happy Tweening!

Hi, Is not really clear what you're trying to do here, so I took my best guess and came up with this: https://codepen.io/GreenSock/pen/eYoqbyz Hopefully this helps. Happy Tweening!

Hi, This would be my approach: https://codepen.io/GreenSock/pen/vYMqvNr Hopefully this helps. Happy Tweening!

Hi @mantiss, You can try checking for the window object so it works only on the browser and not during deploys or SSR (in case you have SSR in your project): if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Although the useEffect/useLayoutEffect approach should work as well. Happy Tweening!

Hi @simran_evoco, This thread @mvaneijgen created should help you to achieve that: Happy Tweening!

Hi, Maybe these demos can help: https://codepen.io/GreenSock/pen/MWaWPmG https://codepen.io/GreenSock/pen/gOabMXv Happy Tweening!

It seems to me that the problem is here: const rotationAngle = 360 * (closestItemIndex / menuItemElements.length); When you go from 300 to 360 it goes from 300 to 0, so the dot goes all the way to 0 degrees instead of going to 360. The problem here is the logic to keep the dot going in the same direction. Right of the top of my head I can't think of something that solves this. Maybe wrap the degree values between large negative an positive values could be an option. Sorry I can't be of more assistance. Happy Tweening!